import React, { Component } from 'react';
import { connect } from 'react-redux';
import './index.scss'
import { ImagePicker } from 'antd-mobile';
import GobackHeader from '../../../../components/user/GobackHeader'
import MySwitch from '../../../../components/user/MySwitch'

class Com extends Component {
	state = {
    files: [],
  }
  onChange = (files, type, index) => {
		console.log(files, type, index);
    this.setState({
      files,
    });
  }
	submit(){
		console.log('提交')
	}
	render(){
		return (
			<div className="feedback">
					<div className="feedback-header">
					<GobackHeader 
						title='意见反馈' 
						rightTitle='提交'
						myClick = {this.submit}
						/>
					</div>
				<div className="feedback-wrap">
					<div className="feedback-title">
						<span>反馈主题</span>
						<input type="text" placeholder='请输入反馈内容标题' className='input-title'/>
					</div>
					<div className="feedback-content">
						<span className='content-font'>反馈详情 <i className='content-red'>*</i></span>
						<textarea placeholder='请输入反馈内容详情'></textarea>
						<img className='rightbottom' src="/images/user_ images/rbuttom.jpg" alt=""/>
						<span className='leftbottom'>
							反馈截图
						</span>
						<div style={{
								height: '1.67rem',
								width: '75%',
								position: 'absolute',
								bottom: '0.17rem'
						}}>
							<ImagePicker
								files={this.state.files}
								onChange={this.onChange}
								onImageClick={(index, fs) => console.log(index, fs, '2')}
								selectable={this.state.files.length < 4}
								accept="image/gif,image/jpeg,image/jpg,image/png"
							/>
							{/* <img src="/images/user_ images/pic.jpg" alt="" className="feedbackimg"/> */}
						</div>
					</div>
					<div className="anonymityfeedback">
						<span>匿名反馈</span>
						<MySwitch
							width='1.2rem'
							height= '0.53rem'
							activebackground='rgba(108,182,255,1)'
							background = '#ccc'
							circleColor = '#fff'
						/>
					</div>
				</div>
			</div>
		)
	}
}
export default connect()(Com)